<template>
  <plain-page>
    <el-card shadow="never" body-style="padding: 10px 20px;">
      <el-row :gutter="56">
        <el-col :span="4">
          <span class="count-title">
            服务订单总数
          </span>
        </el-col>
        <el-col :span="4">
          <span class="count-title">
            服务未开始数
          </span>
        </el-col>
        <el-col :span="4">
          <span class="count-title">
            服务进行中数
          </span>
        </el-col>
        <el-col :span="4">
          <span class="count-title">
            服务已完成数
          </span>
        </el-col>
        <el-col :span="4">
          <span class="count-title">
            服务已取消数
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="56">
        <el-col :span="4">
          <span class="count-num">{{serviceOrderCounts.total}}</span>
        </el-col>
        <el-col :span="4">
          <span class="count-num">{{serviceOrderCounts.notstarted}}</span>
        </el-col>
        <el-col :span="4">
          <span class="count-num">{{serviceOrderCounts.inprogress}}</span>
        </el-col>
        <el-col :span="4">
          <span class="count-num">{{serviceOrderCounts.finished}}</span>
        </el-col>
        <el-col :span="4">
          <span class="count-num">{{serviceOrderCounts.canceled}}</span>
        </el-col>
      </el-row>
    </el-card>
    <order-card ref="orderCard" style="margin-top: 4px;" />
  </plain-page>
</template>

<script>
import OrderCard from './OrderCard';
export default {
  pageProps: {
    title: '服务人员详情'
  },
  components: {
    OrderCard
  },
  data() {
    return {
      serviceOrderCounts: {
        total: '-'
      }
    }
  },
  async mounted() {
    this.$refs.orderCard.query(this.$params);
    const ret = await this.$http.get('/api/shop/employee/stat', {params: {employeeId: this.$params.id}});
    this.serviceOrderCounts = ret.serviceOrderCounts;
  }
}
</script>
<style scoped>
.count-title {
  font-size: 14px;
  color: #909399;
}
.count-num {
  font-size: 18px;
  font-weight: normal;
}
</style>
